<template>
  <el-container class="container">
    <el-header class="header">
      <Header
        :wg-name="KanbanData.wgName"
        :date-string="KanbanData.dateString"
        :so-length="saleorderLength"
      />
    </el-header>
    <el-container>
      <el-aside class="aside">
        <Aside :saleorder="KanbanData.currentSaleOrder" />
      </el-aside>
      <el-main class="main">
        <Tab
          :data1="KanbanData.chart1Data"
          :data2="KanbanData.chart2Data"
          :data3="KanbanData.chart3Data"
          :chosen-tab="chosenTab"
        />
      </el-main>
    </el-container>
    <el-footer class="footer">
      <Footer
        :footerstring1="KanbanData.footerString1"
        :footerstring2="KanbanData.footerString2"
        :footerstring3="KanbanData.footerString2"
      />
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import service from '@/utility/axios';
import dateToString from '@/utility/date';
import Header from '@/components/header.vue';
import Footer from '@/components/footer.vue';
import Aside from '@/components/aside.vue';
import Tab from '@/components/tab/index.vue';
import { IKanbanData } from '@/interface/index';

const route = useRoute();

const defaultData: IKanbanData = {
  wgName: '',
  dateString: '',
  currentSaleOrder: {
    SaleOrderNo: '',
    StyleCode: '',
    FinishedDate: '',
    SoQuantity: 0,
    CSewQuantity: 0,
    CSewTodayQuantity: 0,
    TargetQuantity: 0,
    QC6Percent: '',
    QC9Percent: '',
  },
  chart1Data: [],
  chart2Data: [],
  chart3Data: [],
  footerString1: '',
  footerString2: '',
  footerString3: '',
};

const dataTimer = ref<NodeJS.Timer | null>(null);
const refreshTimer = ref<NodeJS.Timer | null>(null);
const cycleTime = ref(0);
const saleorderLength = ref(0);
const KanbanDatas = ref<IKanbanData[]>([]);
const KanbanData = ref<IKanbanData>(defaultData);
const refreshTime = import.meta.env.VITE_REFRESH_TIME;
const culture = import.meta.env.VITE_LANGUAGE;
const reloadTime = import.meta.env.VITE_RELOAD_DATA_TIME;

const tabs = ref(['Process', 'Target', 'Defect']);
const tabIndex = ref(0);
const chosenTab = ref('Process');

const wgCode = computed(() => {
  return route.params.wgcode;
});
const dateStr = computed(() => {
  if (route.params.datestring) {
    return route.params.datestring;
  } else {
    let nowdate = new Date();
    return dateToString(nowdate);
  }
});
function getData() {
  service
    .get('/JZ/GetJZKanBan', {
      params: {
        wgcode: wgCode.value,
        datestring: dateStr.value,
        culture: culture,
      },
    })
    .then((res) => {
      cycleTime.value = 0;
      let data = res.data as IKanbanData[];
      saleorderLength.value = data.length;
      KanbanData.value = data[0];
      KanbanDatas.value = data;
    })
    .catch(() => {
      saleorderLength.value = 0;
      KanbanData.value = defaultData;
      KanbanDatas.value = [];
    });
}

function CycleSaleoder() {
  if (KanbanDatas.value.length > 0) {
    let lens = KanbanDatas.value.length;
    let time = cycleTime.value % lens;
    KanbanData.value = KanbanDatas.value[time];
    chosenTab.value = tabs.value[tabIndex.value];
    if (tabIndex.value >= tabs.value.length - 1) {
      tabIndex.value = 0;
      cycleTime.value++;
    } else {
      tabIndex.value++;
    }
  }
}
onMounted(() => {
  getData();
  dataTimer.value = setInterval(() => {
    getData();
  }, reloadTime);
  refreshTimer.value = setInterval(() => {
    CycleSaleoder();
  }, refreshTime);
});

onBeforeMount(() => {
  clearInterval(Number(dataTimer.value));
  clearInterval(Number(refreshTimer.value));
});
</script>

<style scoped lang="scss">
.container {
  display: flex;
  width: 100%;
  height: 100%;
  .header {
    padding: 10px;
    height: 5%;
  }
  .footer {
    padding: 10px;
    height: 5%;
  }
  .aside {
    padding: 10px;
    width: 33%;
  }
  .main {
    padding: 10px;
    width: 67%;
  }
}
</style>
@/types
